<template>
	<view class="page">
		<view class="header">
			<view class="header-1"></view>
			<view class="header-2">
				<image src="/static/logo.png"></image>
				教育培训系统
			</view>
			<view class="header-3"></view>
		</view>
		<view class="content">
			<view class="mine">
				<view class="myInfo">
					<view>
						<image :src="fileImage + userInfo.headIcon" class="headers" mode="scaleToFill"></image>
					</view>
					<view>
						<view class="nickName">{{ userInfo.userName }}</view>
						<view v-if="!userInfo.roleIds.includes('365139403107997317')" class="flex roleName">
							<image src="/static/tab/slectWindow02.png" style="width: 20px; height: 20px;"></image>
							<text style="padding-left: 10rpx;">{{ userInfo.roleName }}</text>
						</view>
					</view>
				</view>
				<template v-if="userInfo.roleIds.includes('365139403107997317')">
					<view class="allUser">
						<view class="user">
							<view class="num">{{ subscriber.trainUsersNum }}</view>
							<view class="title">培训用户</view>
						</view>
						<view class="user">
							<view class="num">{{ subscriber.scienceUsersNum }}</view>
							<view class="title">科普用户</view>
						</view>
						<view class="user">
							<view class="num">{{ subscriber.examUsersNum }}</view>
							<view class="title">考试用户</view>
						</view>
					</view>
				</template>
			</view>
			<view class="myAction">
				<view class="title">学习成就</view>
				<view class="itemall">
					<view class="item">
						<view class="num">
							<view class="n1">0</view>
							<view class="n2">min</view>
						</view>
						<view class="sx">学时</view>
						<image src="/static/tab/time.png" class="logo"></image>
					</view>
					<view class="item item1">
						<view class="num">
							<view class="n1">{{ allCertNum }}</view>
							<view class="n2">个</view>
						</view>
						<view class="sx">证书</view>
						<image src="/static/tab/zszz.png" class="logo"></image>
					</view>
					<view class="item item2">
						<view class="num">
							<view class="n1">{{ allPoints }}</view>
							<view class="n2">分</view>
						</view>
						<view class="sx">积分</view>
						<image src="/static/tab/jf.png" class="logo"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="otherAll">
			<view class="other" @click="toeditPassWord">
				<image class="logo" src="/static/tab/password.png"></image>
				<view class="text">密码修改</view>
				<image class="logo2" src="/static/tab/arrowRight.png"></image>
			</view>
			<view class="" style="margin:16px;">
				<u-button
					type="primary"
					hover-class="none"
					:custom-style="{ backgroundColor: '#e2e3e8', height: '90rpx', color: '#464648', border:'none', borderRadius: '8px'}"
					@click="changeLogOut"
				>退出登录</u-button>
			</view>
			<!-- <view class="other">
				<image class="logo" src="/static/tab/lock.png"></image>
				<view class="text">修改绑定微信号</view>
				<image class="logo2" src="/static/tab/arrowRight.png"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getSubscriber,
		temsChbDetail,
		getMyCertList,
		getTemsCertUserSimpleList
	} from "@/api/me"
	export default {
		data() {
			return {
				fileImage: this.$globalSetting.fileImage,
				userInfo: {
					userName: '',
					headIcon: '',
					roleIds: []
				},
				allPoints: 0,
				allCertNum: 0,
				subscriber: {
					trainUsersNum: 0,
					scienceUsersNum: 0,
					examUsersNum: 0
				},
				loading: false,
			}
		},
		onLoad() {
			this.getInfoData();
			this.getTemsChbDetail();
			this.getMyCertListData();
		},
		onShow() {

		},
		methods: {
			// 退出
			changeLogOut() {
				this.showModal('确定退出吗？', '系统提示', () => {
					this.loading = true;
					this.$store.dispatch('user/logout', {})
					.then(() => {
						this.loading = false;
						uni.redirectTo({
							url:'/pages/register/login'
						})
					})
					.catch((err) => { 	
						this.loading = false;
					})
				})
			},
			// // 培训用户等数据
			// subscriberData() {
			// 	getSubscriber().then(res => {
					
			// 		// 	this.subscriber.trainUsersNum
			// 		// 	this.subscriber.scienceUsersNum
			// 		// 	this.subscriber.examUsersNum
					
			// 	}).catch(() => {
			// 	})
			// },
			// 获取当前登录人信息
			getInfoData() {
				this.$store.dispatch('user/getInfo').then(res => {
					this.userInfo = res.userInfo;
				})
				.catch((err) => {
					this.showSuccess(err, 'none');
				})
			},
			// 获取总积分
			getTemsChbDetail() {
				temsChbDetail(3).then(res => {
					this.allPoints = res.data.totals;
				})
				.catch(err => {
				})
			},
			// 已获得证书数量
			getMyCertListData() {
				// let params = {
				// 	currentPage: 1,
				// 	enabledMark: '',
				// 	pageSize: 999,
				// 	sidx: '',
				// 	sort: 'desc'
				// }
				// getMyCertList(params).then(res => {
				// 	this.allCertNum = res.data.pagination.total;
				// })
				 const params = {
					currentPage: 1,
					pageSize: 10,
					sort: 'desc',
					enabledMark: 1,
					sidx: ''
				};
				getTemsCertUserSimpleList(params).then(res => {
					this.allCertNum = res.data.pagination.total;
				})
			},
			toeditPassWord() {
				uni.navigateTo({
					url: '/pages/Mine/editInfo'
				})
			},
			click(val) {
				this.showIndex = val.index
				console.log("val", val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headers {
		width: 136rpx;
		height: 136rpx;
		border-radius: 50%;
		border: 2rpx solid #EBEDF0;
	}

	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: center;

		background: #F6F8FC;


		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;

			.header-1 {
				flex: 1;
			}

			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}

			.header-3 {
				flex: 1;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			gap: 32rpx;

			.mine {

				width: 750rpx;
				// height: 336rpx;
				background: #FFFFFF;
				display: flex;
				flex-direction: column;

				.myInfo {
					margin: 32rpx  64rpx;
					width: 100%;
					height: 156rpx;
					display: flex;
					// justify-content: center;
					align-items: center;

					.article {
						width: 136rpx;
						height: 136rpx;
						border-radius: 50%;
						background: #323233;
						border: 2rpx solid #EBEDF0;
					}

					.nickName {
						width: 120rpx;
						height: 60rpx;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						margin-left: 42rpx;

						font-weight: bold;
						font-size: 40rpx;
						color: #323233;
						line-height: 60rpx;
						text-align: left;
						font-style: normal;
					}
					.roleName {
						margin-left: 42rpx;
						font-size: 12px;
						line-height: 60rpx;
						color: #1890ff;
						align-items: center;
					}
				}

				.allUser {
					margin: 26rpx 0 0 32rpx;
					width: 686rpx;
					height: 100rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					.user {
						width: 228rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.num {
							font-weight: bold;
							font-size: 40rpx;
							color: #323233;
							line-height: 60rpx;
							text-align: right;
							font-style: normal;
						}


						.title {
							font-weight: 400;
							font-size: 28rpx;
							color: #646566;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
						}


					}
				}

			}


			.myAction {
				width: 750rpx;
				height: 372rpx;
				background: #FFFFFF;

				.title {

					height: 48rpx;
					font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					font-weight: 500;
					font-size: 32rpx;
					color: #323233;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					margin: 32rpx 0 0 32rpx;
				}

				.itemall {
					display: flex;
					flex-direction: row;
					gap: 26rpx;
					margin: 28rpx 0 0 32rpx;

					.item1 {
						background: #FFF3F3 !important;
					}

					.item2 {
						background: #FFFBF7 !important;
					}

					.item {
						width: 212rpx;
						height: 216rpx;
						background: #EEF3FD;
						border-radius: 16rpx;
						position: relative;

						.num {
							display: flex;
							flex-direction: row;
							margin: 24rpx 0 0 24rpx;



							.n1 {
								font-weight: bold;
								font-size: 40rpx;
								color: #323233;
								line-height: 60rpx;
								text-align: right;
								font-style: normal
							}

							.n2 {
								margin: 18rpx 0 0 4rpx;
								font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
								font-weight: 400;
								font-size: 24rpx;
								color: #646566;
								line-height: 32rpx;
								text-align: right;
								font-style: normal;
							}

						}

						.sx {
							margin: 56rpx 0 0 24rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #646566;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}

						.logo {
							width: 72rpx;
							height: 72rpx;
							position: absolute;
							right: 8rpx;
							bottom: 8rpx;

						}

					}
				}


			}
		}

		.otherAll {
			display: flex;
			flex-direction: column;

			.other {
				width: 750rpx;
				height: 100rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;

				.logo {
					width: 48rpx;
					height: 48rpx;
					margin: 0 0 0 48rpx;
				}

				.logo2 {
					position: absolute;
					right: 32rpx;
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					margin: 0 0 0 24rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #101010;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}



	}
</style>